<template>
	<el-container class="register-view drag-box">
		<div class="back_box">
			<img class="img" src="../../public/login_back.png" alt="">
		</div>

		<dragBar login></dragBar>
		<div class="register-brand ">
			<img class="logo" src="../../public/logo.png" />
		</div>
		<div class="drag-box-none">
			<el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" class="web-ruleForm">
				<!-- <div class="register-brand">
					<img class="logo" src="../../public/logo.png" />
				</div> -->

				<div class="registerType">
					<div class="item" v-if="false">
						{{ $t('手机号注册') }}
					</div>
					<div class="item" :class="{ on: registerType == 'email' }">
						{{ $t('邮箱注册') }}
					</div>
				</div>

				<el-form-item label="" prop="email">
					<el-select v-model="registerForm.countryId" :placeholder="$t('国家')">
						<el-option v-for="item in countryNameList" :key="item.value" :label="item.text"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="" prop="email">
					<el-input type="email" v-model="registerForm.email" autocomplete="off" :placeholder="$t('邮箱')">
						<el-button slot="append" @click="code">{{ $t(text) }}</el-button>
					</el-input>
				</el-form-item>

				<el-form-item label="" prop="captcha">
					<el-input type="captcha" v-model="registerForm.captcha" autocomplete="off"
						:placeholder="$t('验证码')"></el-input>
				</el-form-item>


				<el-form-item label="" prop="nickname">
					<el-input type="nickname" v-model="registerForm.nickname" autocomplete="off"
						:placeholder="$t('昵称')"></el-input>
				</el-form-item>
				<el-form-item label="" prop="pwd">
					<el-input type="password" v-model="registerForm.pwd" autocomplete="off"
						:placeholder="$t('密码')"></el-input>
				</el-form-item>
				<el-form-item label="" prop="corfirmPassword">
					<el-input type="password" v-model="registerForm.corfirmPassword" autocomplete="off"
						:placeholder="$t('确认密码')"></el-input>
				</el-form-item>
				<el-form-item class="btn_box">
					<el-button type="primary fullbtn" @click="submitForm('registerForm')">{{ $t('注册') }}</el-button>
					<!-- <el-button @click="resetForm('registerForm')">清空</el-button> -->
				</el-form-item>
				<div class="to-login">
					<router-link to="/login">{{ $t('已有账号,前往登录') }}</router-link>
				</div>
			</el-form>
		</div>
	</el-container>
</template>

<script>
import { emailRegister } from '@/api/register.js'
import { sendCodeEMail } from '@/api/common.js'
import sendVerifyCode from "@/utils/SendVerifyCode";
import {
	Debounce
} from '@/utils/double.js'
import dragBar from '@/view/components/dragBar'

export default {
	mixins: [sendVerifyCode],
	name: "login",
	components: {
		dragBar
	},
	data() {
		var checkEmail = (rule, value, callback) => {
			if (!value) {
				return callback(new Error(this.$t('请输入邮箱')));
			}
			callback();
		};
		var checkCountryId = (rule, value, callback) => {
			if (!value) {
				return callback(new Error(this.$t('请选择国家')));
			}
			callback();
		}; var checkCaptcha = (rule, value, callback) => {
			if (!value) {
				return callback(new Error(this.$t('请输入验证码')));
			}
			callback();
		};
		var checknickname = (rule, value, callback) => {
			if (!value) {
				return callback(new Error(this.$t('请输入昵称')));
			}
			callback();
		};
		var checkPwd = (rule, value, callback) => {
			if (value === '') {
				return callback(new Error(this.$t('请输入密码')));
			}
			callback();
		};
		var checkCorfirmPassword = (rule, value, callback) => {
			if (value === '') {
				return callback(new Error(this.$t('请输入密码')));
			}
			if (value != this.registerForm.pwd) {
				return callback(new Error(this.$t('两次密码输入不一致')));
			}
			callback();
		};
		return {
			text: "获取验证码",
			countryNameList: [],

			value: '',
			registerType: 'email',
			registerForm: {
				captcha: '',
				countryId: '',
				email: '',
				nickname: '',
				pwd: '',
				corfirmPassword: '',
				terminal: this.$enums.TERMINAL_TYPE.WEB
			},
			rules: {
				captcha: [{
					validator: checkCaptcha,
					trigger: 'blur'
				}],
				countryId: [{
					validator: checkCountryId,
					trigger: 'blur'
				}],
				email: [{
					validator: checkEmail,
					trigger: 'blur'
				}],

				nickname: [{
					validator: checknickname,
					trigger: 'blur'
				}],
				pwd: [{
					validator: checkPwd,
					trigger: 'blur'
				}],
				corfirmPassword: [{
					validator: checkCorfirmPassword,
					trigger: 'blur'
				}]
			}
		};
	},
	mounted() {
		this.$ipcRenderer.send("reset-window", 320, 600);
	},
	created() {
		this.$http({
			url: "/country/getOption",
			method: 'get',
		}).then((data) => {
			let countryNameList = data;
			countryNameList.forEach(e => {
				this.countryNameList.push({
					text: e.countryName,
					value: e.countryId,
					number: e.countryPhoneNumber
				})
			})
		})
	},
	methods: {
		codeSendEmail() {
			let that = this;
			// 发送验证码
			sendCodeEMail({
				countryId: this.registerForm.countryId,
				email: that.registerForm.email,
				// 1注册
				mailType: 1
			}).then(res => {
				this.$message.success(this.$t('发送成功'))
				that.sendCode();
			})
				.catch(err => {
					return this.$message.err(err)
				});
		},
		code: Debounce(function () {
			console.log(this.disabled)
			if (this.disabled) return
			let that = this;
			if (!this.registerForm.countryId) return this.$message.warning('请选择国家')
			let email = that.registerForm.email
			if (!email) return this.$message.warning('请填写邮箱')
			this.codeSendEmail();
		}),
		submitForm(formName) {
			let _this = this;

			this.$refs[formName].validate((valid) => {
				if (valid) {
					emailRegister(this.registerForm).then(res => {
						this.$message.success(this.$t("注册成功"));
					})
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
}
</script>

<style scoped lang="scss">
.el-select {
	width: 100%;
}

.registerType {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 30px;
	margin-bottom: 40px;

	.item {
		color: #e2e2e2;
		font-size: 30px;

		&.on {
			color: #000;
		}
	}
}

.register-view {
	position: fixed;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 15px;
	// background: rgb(232, 242, 255);


	.back_box {
		position: absolute;
		bottom: 0;
		right: 0;

		.img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	.register-brand {
		display: flex;
		line-height: 50px;
		font-size: 22px;
		font-weight: 600;
		letter-spacing: 2px;
		text-transform: uppercase;

		.logo {
			width: 50px;
			height: 50px;
			object-fit: contain;
		}
	}

	.web-ruleForm {
		width: 100%;
		// height: 550px;
		opacity: 0.9;
		border-radius: 3px;
		overflow: hidden;
		border-radius: 3%;

		.btn_box {
			.fullbtn {
				width: 100%;
				height: 40px;
			}
		}

		.to-login {
			display: flex;
			line-height: 40px;
			text-align: left;
			padding-left: 20px;
			font-size: 14px;
			color: #255F46;
			justify-content: center;

			a {
				color: #255F46;
				text-decoration: none;
			}
		}
	}
}
</style>
